<template>
  <div class="Forget">
    <NavBer :navtitle="navtitle"></NavBer>
    <Prompt v-if="promptStute" :prompt="prompt"></Prompt>
    <div class="from">
      <div class="input">
        <img class="left_icon" v-bind="{src: phone.length<=0 ? icon[0] : active_icon[0]}" alt="手机号码">
        <input type="number" @blur="change($event,'phone')" @focus="change($event,'phone')" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入手机号码" v-model="phone">
        <div class="right_icon" v-if="phone.length>0" @click="clear('phone')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="phoneFocusStute">
          </div>
        </div>
      </div>
      <div class="input">
        <img class="left_icon" v-bind="{src: securityCode.length<=0 ? icon[1] : active_icon[1]}" alt="短信验证码">
        <input type="text" maxlength="6" placeholder="请输入短信验证码" @blur="change($event,'securityCode')" @focus="change($event,'securityCode')" v-model="securityCode">
        <div class="right_icon securitycode">
          <span v-bind="{ class : phone.length>0 ? 'acquire_active' : 'acquire' }" v-text="timecontent" @click="timer"></span>
          <p v-if="phone.length<11 || securityStute" @click="hint"></p>
        </div>
        <div class="right_icon" v-if="securityCode.length>0" @click="clear('securityCode')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="securityFocusStute">
          </div>
        </div>
      </div>
      <div class="input">
        <img class="left_icon" v-bind="{src: newPwd.length<=0 ? icon[2] : active_icon[2]}" alt="密码">
        <input @blur="change($event,'newPwd')" @focus="change($event,'newPwd')" type='password' placeholder="新密码（6-15位数字、字母组合）" v-model="newPwd">
        <div class="right_icon eyes_icon" v-if="newPwd.length>0" @click="clear('newPwd')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="newPwdFocusStute">
          </div>
        </div>
      </div>
      <div class="input">
        <img class="left_icon" v-bind="{src: affirmPwd.length<=0 ? icon[2] : active_icon[2]}" alt="密码">
        <input @blur="change($event,'affirmPwd')" @focus="change($event,'affirmPwd')"  type='password' placeholder="确认新密码" v-model="affirmPwd">
        <div class="right_icon eyes_icon" v-if="affirmPwd.length>0" @click="clear('affirmPwd')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="affirmPwdFocusStute">
          </div>
        </div>
      </div>
    </div>
    <div class="button" v-if="phone.length<11||securityCode.length<6||newPwd.length<6||affirmPwd!==newPwd">完成</div>
    <div class="button active" v-if="phone.length==11&&securityCode.length==6&&newPwd.length>=6&&affirmPwd===newPwd" @click="forget">完成</div>
  </div>
</template>

<script>
import NavBer from '@/components/NavBer.vue'
import Prompt from '@/components/Prompt.vue'
import api from '../../utils/api';
import qs from 'qs';
export default {
  name: 'Forget',
  components: {
    NavBer,
    Prompt
  },
  data () {
    return {
      navtitle: "忘记密码",
      icon: [
        require("../../assets/phone-icon.png"),
        require("../../assets/securitycode-icon.png"),
        require("../../assets/pwd-icon.png"),
      ],
      active_icon: [
        require("../../assets/phone-active-icon.png"),
        require("../../assets/securitycode-active-icon.png"),
        require("../../assets/pwd-active-icon.png")
      ],
      phone: "",
      securityCode: "",
      newPwd: "",
      affirmPwd: "",
      phoneFocusStute: false,
      securityFocusStute: false,
      newPwdFocusStute: false,
      affirmPwdFocusStute: false,
      timecontent: "获取验证码",
      countdownTime: 60,
      securityStute: false,
      cutStute: true,
      prompt: "",
      promptStute: false,
    }
  },
  methods: {
    // input 清除
    clear(value){
      this[value] = ""
      this.promptStute = false
    },
    // 获焦、失焦
    change(e,name){
      var type = e.type
      var that = this;
      if(type == "blur"){
        if(name == "phone") {
          that.phoneFocusStute = false;
          var reg=/^1[345678]\d{9}$/;
          if (that.phone == "") {
            that.prompt = "手机号码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (!(reg.test(that.phone))) {
            that.prompt = "手机号码格式错误"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }else if(name == "securityCode") {
          that.securityFocusStute = false;
          var reg=/^[0-9]{6}$/;
          if (that.securityCode == "") {
            that.prompt = "验证码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (!(reg.test(that.securityCode))) {
            that.prompt = "验证码格式错误"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }else if(name == "newPwd") {
          that.newPwdFocusStute = false;
          var reg=/^[a-zA-Z0-9]{6,15}$/;
          if (that.newPwd == "") {
            that.prompt = "密码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (!(reg.test(that.newPwd))) {
            that.prompt = "请输入6-15位位的登录密码）"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }else if(name == "affirmPwd") {
          that.affirmPwdFocusStute = false;
          var reg=/^[a-zA-Z0-9]{6,15}$/;
          if (that.affirmPwd == "") {
            that.prompt = "密码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (that.affirmPwd !== that.newPwd) {
            that.prompt = "两次密码不一致"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }
      }else if(type == "focus"){
        if(name == "phone") {
          that.phoneFocusStute = true;
        }else if(name == "securityCode") {
          that.securityFocusStute = true;
        }else if(name == "newPwd") {
          that.newPwdFocusStute = true;
        }else if(name == "affirmPwd") {
          that.affirmPwdFocusStute = true;
        }
      }
    },
    // 获取验证码
    timer(){
      var that = this;
      if(that.phone.length == 11){
        api.post("/user/getPasswordCode",qs.stringify({phone: that.phone}),"post",{})
        .then(res=>{
          if(res.data.status.statusCode === 0){
            console.log(res.data.result)
            console.log(res)
            that.securityStute = true
            that.timecontent = that.countdownTime + 'S重新获取'
            let clock = setInterval(() => {
              that.countdownTime--
              that.timecontent = that.countdownTime + 'S重新获取'
              if (that.countdownTime <= 0) {
                clearInterval(clock)
                that.timecontent = '重新发送验证码'
                that.countdownTime = 60
                that.securityStute = false
              }
            },1000)
          }else{
            console.log(res)
          }
        })
      }
    },
    // 未填手机号不可点
    hint(){
      var that = this
      if(that.phone.length == ""){
        that.promptStute = true;
        that.prompt = "请先填写手机号"
        setTimeout(() => {
          that.promptStute = false;
        },1500)
      }
    },
    // 密码是否可见
    cut(){
      this.cutStute = !this.cutStute
    },
    // 忘记密码
    forget(){
      var that = this;
      api.post("/user/passUpdate",qs.stringify({loginName: that.phone,newPassword: that.newPwd,code: that.securityCode}),"post",{})
        .then(res=>{
          if(res.data.status.statusCode === 0){
            that.prompt = ""
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
            console.log(res)
            // that.$router.push({path: '/Login'});
          }else{
            console.log(res)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.Forget{
  position: relative;
  .from{
    padding: .6rem .32rem .3rem .33rem;
    .input{
      width: 100%;
      height: .42rem;
      position: relative;
      .left_icon{
        width: .16rem;
        height: .16rem;
        margin: .12rem 0;
        float: left;
      }
      input{
        width: 90%;
        height: .16rem;
        padding: .12rem 0;
        outline: none;
        border: none;
        position: absolute;
        left: .3rem;
      }
      input::-webkit-input-placeholder {
        line-height: 1;
          color: #ccc;
          font-size: .15rem;
          text-align: left;
      }
      .right_icon{
        width: .42rem;
        height: .42rem;
        text-align: center;
        line-height: .42rem;
        float: right;
        position: relative;
        z-index: 1;
        .clear_icon{
          width: .42rem;
          height: .42rem;
          img{
            width: .14rem;
            height: .14rem;
          }
        }
        .block_icon{
          width: .42rem;
          height: .42rem;
          img{
            width: .14rem;
          }
        }
      }
      .eyes_icon{
        width: .96rem;
        height: .42rem;
        display: flex;
        justify-content: space-between;
      }
      .securitycode{
        width: 1rem;
        height: .42rem;
        text-align: center;
        line-height: .42rem;
        position: relative;
        .acquire{
          font-size: .14rem;
          color: #999;
        }
        .acquire_active{
          font-size: .14rem;
          color: #05A3FA;
        }
        >p{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      &::after{
        content: "";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        transform: scaleY(.5);
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .button{
    margin: 0 auto;
    width: 3.11rem;
    height: .44rem;
    line-height: .44rem;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: .16rem;
    background-color: #D33;
    color: #fff;
    opacity: .5;
  }
  .active{
    opacity: 1;
  }
}
</style>

